<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
				list-style: none;
			}
			#nav{
				height:30px;
				background: #E0E0E0;
			}
			#nav ul{
				width:600px;
				margin:0 auto;
				position:relative;
				
			}
			#nav ul li{

				float:left;
			}
			#nav ul li .title{
				/*width:100px;*/
				height:30px;
				text-align: center;
				line-height: 30px;
				padding:0px 15px;
				border-right: 1px solid red;
				border-left:1px solid blue;
			}
			#nav ul li .hide{
				width:600px;
				height:300px;
				border:1px solid chocolate;
				background: cornsilk;
				position:absolute;
				top:30px;
				left:0px;
				display:none;
			}
			#nav ul li:hover .hide{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li>
					<div class="title"><a href="">首页</a></div>
					<div class="hide">
						首页
						
					</div>
				</li>
				<li>
					<div class="title"><a href="">体育体育</a></div>
					<div class="hide">
						体育体育
						
					</div>
				</li>
				<li>
					<div class="title"><a href="">男装男装</a></div>
					<div class="hide">
						男装男装
						
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>
